<template>
  <!-- 就诊人组件的结构 -->
  <el-card class="box-card" style="">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button @click="addUser" type="success" :icon="User"
          >添加就诊人</el-button
        >
      </div>
    </template>
    <!-- 就诊人管理模块 -->
    <div class="visitors" v-if="scene">
      <visitor
        @changeScene="changeScene"
        @removeUser="removeUser"
        class="item"
        v-for="(user, index) in userArr"
        :key="user.id"
        :user="user"
        :index="index"
        :showDelete="true"
      />
    </div>
    <!-- 添加就诊人|修改已有的就诊人信息 -->
    <div class="form" v-else>
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form style="width: 60%; margin: 0 auto" label-width="80">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名" v-model="userParams.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请选择证件类型" v-model="userParams.certificatesType">
            <el-option label="身份证" value="10"></el-option>
            <el-option label="户口本" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="userParams.certificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="userParams.sex">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="userParams.birthdate" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="userParams.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
      <el-form style="width: 60%;margin: 0 auto;" label-width="80">
        <el-form-item label="婚姻状态">
          <el-radio-group v-model="userParams.isMarry">
            <el-radio :value="1">已婚</el-radio>
            <el-radio :value="2">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="userParams.isInsure">
            <el-radio :value="1">自费</el-radio>
            <el-radio :value="2">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-cascader :props="props" v-model="userParams.addressSelected"/>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入详细地址" v-model="userParams.address"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息（选填）</el-divider>
      <el-form style="width: 60%; margin: 0 auto" label-width="80">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名" v-model="userParams.contactsName"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请选择证件类型" v-model="userParams.contactsCertificatesType">
            <el-option label="身份证" value="10"></el-option>
            <el-option label="户口本" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="userParams.contactsCertificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="userParams.contactsPhone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="submit">提交</el-button>
          <el-button type="primary" size="default" @click="reset">重写</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { User } from "@element-plus/icons-vue";
import { reqGetUser } from "../../../api/hospital";
import { reqCertationType,reqCity,reqAddOrUpdateUser } from "../../../api/user";
import type { UserResponseData, UserArr } from "../../../api/hospital/type";
import type { CertationTypeResponseData,CertationArr,AddOrUpdateUser } from "../../../api/user/type";
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, type CascaderProps } from 'element-plus'
import { useRouter,useRoute } from "vue-router";
let $route= useRoute();
let $router = useRouter();
// 存储全部就诊人的信息
let userArr = ref<UserArr>([]);
// 存储证件类型的数据
let certationArr = ref<CertationArr>([]);
// 决定卡片身体部分展示内容的响应式数据
let scene = ref<boolean>(true);
// 收集新增就诊人的数据
let userParams = reactive<AddOrUpdateUser>({
  name: '',
  certificatesType: '',
  certificatesNo:'',
  sex:0,
  birthdate:'',
  phone:'',
  isMarry:0,
  isInsure:0,
  addressSelected:[],
  address:'',
  contactsName:'',
  contactsCertificatesType:'',
  contactsCertificatesNo:'',
  contactsPhone:''
})
// 组件挂载完毕
onMounted(() => {
  // 获取就诊人信息
  getAllUser();
  // 获取证件类型的数据
  getCertationType();
  // 判断当前这个路由是不是从挂号页面而来
  if($route.query.type=='add'){
    scene.value = false;
  }

  if($route.query.type=='edit'){
    scene.value = false
  }
});
// 获取全部就诊人信息
const getAllUser = async () => {
  let result: UserResponseData = await reqGetUser();
  if (result.code == 200) {
    userArr.value = result.data;
  }
};

// 添加就诊人按钮的回调
const addUser = ()=>{
  // 清空上一次的数据
  reset();
  // 切换场景
  scene.value = false;
}

const reset = ()=>{
  Object.assign(userParams,{
    id:null,
    name: '',
    certificatesType: '',
    certificatesNo:'',
    sex:0,
    birthdate:'',
    phone:'',
    isMarry:0,
    isInsure:0,
    addressSelected:[],
    address:'',
    contactsName:'',
    contactsCertificatesType:'',
    contactsCertificatesNo:'',
    contactsPhone:''
  })
}

// 就诊人子组件自定义事件的回调
const changeScene = (user:AddOrUpdateUser) => {
  scene.value = false;
  // 收集已有的就诊人信息
  Object.assign(userParams,user);
};

// 获取证件类型的方法
const getCertationType = async ()=>{
  let result:CertationTypeResponseData = await reqCertationType();
  if(result.code==200){
    certationArr.value = result.data
  }
}

// 级联选择器数据
const props:CascaderProps = {
  lazy:true,  //懒加载数据 
  async lazyLoad(node:any, resolve:any) {
    let result:any = await reqCity(node.data.id||'86')
    // 整理数据
    let showData = result.data.map(((item:any)=>{
      return{
        id:item.id,
        label:item.name,
        value:item.value,
        leaf: item.hasChildren
      }
    }));
    // 注入组件需要展示的数据
    resolve(showData);
  },
}

// 提交按钮的方法的回调
const submit = async ()=>{
  // 要么更新就诊人|新增就诊人
  try {
    // 要么新增就诊人成功|更新已有的就诊人
    await reqAddOrUpdateUser(userParams);
    // 提示的文字
    ElMessage({
      type:'success',
      message:userParams.id?'更新成功':'新增成功'
    })
    // 提交按钮 判断:是否从预约挂号而来
    if($route.query.type){
      $router.back(); //导航回上一个路由
    }else{
      scene.value = true;
    }
    // 获取全部的就诊人信息
    getAllUser();
  } catch (error) {
    ElMessage({
      type:'error',
      message:userParams.id?'更新失败':'新增失败'
    })
  }
}

// 监听全部就诊人的数据
watch(()=>userArr.value,()=>{
  if($route.query.type=='edit'){
    let user = userArr.value.find((item:any)=>{
      return item.id==$route.query.id;
    })
    Object.assign(userParams,user)
  }
})

// 子组件自定义事件：删除按钮触发
const removeUser = ()=>{
  // 再次获取全部的就诊人信息
  getAllUser();
}
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.visitors {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 32%;
    margin: 5px;
  }
}
</style>
